<template>
  <div class="navbar-container">
    <div class="navbar-top">
      <div class="navbar-header">
        <img :src="GlobalConfig.logoPath || Logo" />
        <span>{{ GlobalConfig.title || "MateChat" }}</span>
      </div>
      <div class="dividing-line"></div>
      <div class="chat-box">
        <div class="chat-icon-box active">
          <img src="/chat-icon.svg" />
        </div>
        <span>{{ $t("navbar.chat") }}</span>
      </div>
    </div>
    <div class="navbar-bottom">
      <SwitchLang v-if="!GlobalConfig.language" />
      <Theme v-if="!GlobalConfig.theme" />
      
      <!-- 登录/用户信息 -->
      <div v-if="!authStore.isLoggedIn" class="auth-section">
        <d-popover :position="['right']" trigger="hover">
          <template #content>
            <span class="devui-text">{{ $t("navbar.login") }}</span>
          </template>
          <div class="switch-lang-container" @click="showAuthModal = true">
            <i class="icon-user" />
          </div>
        </d-popover>
      </div>
      
      <div v-else class="user-section">
        <d-popover :position="['right']" trigger="hover">
          <template #content>
            <div class="user-menu">
              <div class="user-info">
                <div class="user-name">{{ authStore.user?.name }}</div>
                <div class="user-email">{{ authStore.user?.email }}</div>
              </div>
              <div class="divider"></div>
              <div class="menu-item" @click="handleLogout">
                <i class="icon-logout"></i>
                <span>{{ $t("navbar.logout") }}</span>
              </div>
            </div>
          </template>
          <div class="switch-lang-container user-avatar">
            <i class="icon-user-filled" />
          </div>
        </d-popover>
      </div>
      
      <d-popover :position="['right']" trigger="hover">
        <template #content>
          <span class="devui-text">{{ $t("navbar.systemSetting") }}</span>
        </template>
        <div class="switch-lang-container">
          <i class="icon-setting system-setting" />
        </div>
      </d-popover>
    </div>
    
    <!-- 认证模态框 -->
    <AuthModal
      v-model:visible="showAuthModal"
      mode="login"
      @auth-success="handleAuthSuccess"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useAuthStore } from '@/store/auth';
import { AuthModal } from '@/view/auth';
import GlobalConfig from "@/global-config";
import { Theme } from "@/view/theme";
import SwitchLang from "./switch-lang.vue";
import Logo from "/logo.svg";

const { t } = useI18n();
const authStore = useAuthStore();

const showAuthModal = ref(false);

const handleAuthSuccess = () => {
  showAuthModal.value = false;
};

const handleLogout = () => {
  authStore.logout();
};
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

:deep(.switch-lang-container) {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 36px;
  height: 36px;
  color: $devui-text;
  border-radius: $devui-border-radius-card;
  cursor: pointer;

  &:hover {
    background-color: rgba(255, 255, 255, 0.2);
  }
}

.navbar-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  width: 60px;
  height: 100%;
  box-sizing: border-box;

  .navbar-top,
  .navbar-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .navbar-top {
    margin-top: 12px;

    .navbar-header {
      display: flex;
      flex-flow: column;
      justify-content: center;
      align-items: center;
      gap: 4px;

      img {
        width: 34px;
        height: 34px;
      }
      span {
        line-height: 20px;
        font-size: 11px;
        font-weight: bold;
      }
    }
  }

  .navbar-bottom {
    padding-bottom: 16px;
    gap: 16px;
  }

  :deep(.mc-header-logo-container) {
    flex-direction: column;
    cursor: pointer;

    .mc-header-title.mc-header-title {
      font-size: 10px;
      font-weight: 600;
    }
  }

  .dividing-line {
    width: 32px;
    height: 1px;
    margin: 16px 0;
    background-color: #babbc0;
  }

  .chat-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    font-size: $devui-font-size-sm;
    cursor: pointer;

    .chat-icon-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 36px;
      height: 36px;
      border-radius: $devui-border-radius-card;

      &.active,
      &:hover {
        background-color: $devui-base-bg;
        box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
      }
    }

    span {
      color: $devui-text;
      font-size: $devui-font-size-sm;
      line-height: 20px;
    }
  }

  ::v-deep .system-setting {
    font-size: 20px;
    cursor: pointer;
  }
}

.devui-text {
  color: $devui-text;
}

/* 认证相关样式 */
.auth-section,
.user-section {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.user-avatar {
  background-color: var(--devui-brand-active);
}

.user-avatar i {
  color: white;
}

.user-menu {
  min-width: 200px;
  padding: 12px 0;
}

.user-info {
  padding: 8px 16px;
  border-bottom: 1px solid var(--devui-dividing-line);
  margin-bottom: 8px;
}

.user-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--devui-text);
  margin-bottom: 4px;
}

.user-email {
  font-size: 12px;
  color: var(--devui-text-weak);
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: var(--devui-area-bg);
}

.menu-item i {
  font-size: 14px;
  color: var(--devui-icon-text);
}

.menu-item span {
  font-size: 14px;
  color: var(--devui-text);
}

.divider {
  height: 1px;
  background-color: var(--devui-dividing-line);
  margin: 8px 0;
}

/* 图标字体类 */
.icon-user::before {
  content: "👤";
}

.icon-user-filled::before {
  content: "👤";
}

.icon-logout::before {
  content: "🚪";
}

@media screen and (max-width: 940px) {
  .navbar-container {
    display: none;
  }
}
</style>
